<template>
  <view class="terminal-state">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>

    <view class="flex terminal-state__header">
      <u-search
        placeholder="请输入编号 姓名或手机号"
        v-model="requstBody.agentNo"
        shape="square"
        bg-color="#f6f6f6"
        :show-action="false"
        @search="search"
      ></u-search>
    </view>

    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <view
          class="terminal-state__item"
          v-for="(item, index) in terminalList"
          :key="index"
        >
          <view class="flex">
            <u-image
              :src="thumb"
              width="40"
              height="40"
              class="card__icon mr-10"
            ></u-image>
            <view class="flex-1">
              {{ item.userName
              }}<text class="yellow">{{
                item.userRole == 'ORG' ? '(机构)' : '(代理)'
              }}</text>
            </view>
            <u-button
              type="primary"
              class="u-margin-left-15"
              :custom-style="customSubmitStyle"
              hover-class="false"
              @click="goAllocate(item)"
              >分拨</u-button
            >
          </view>
          <view class="flex u-margin-top-20">
            <view class=""> ID: </view>
            <view class="">
              {{ item.agentNo }}
            </view>
          </view>

          <view class="flex u-margin-top-10">
            <view class=""> 手机： </view>
            <view>
              {{ item.mobileNo }}
            </view>
          </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      customSubmitStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
        color: 'white',
        height: '60rpx',
        borderRadius: '50rpx',
      },

      thumb: '/static/image/home/icon_agent_header_2.png',
      pageNo: 1,
      pageSize: '10',
      requstBody: {
        agentNo: '',
      },
      terminalList: [],

      scrollTop: 0,
      status: 'loadmore',
      sn: '',
      size: '',
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.sn = this.$route.query.sn;
    this.size = this.$route.query.size;
    this.getAgentUnderList();
  },
  methods: {
    goAllocate(item) {
      this.$u.route('pages/main/terminal/terminalAllocatedConfirm', {
        agentNo: item.agentNo,
        userName: item.userName,
        sn: this.sn,
        size: this.size,
      });
    },

    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.getAgentUnderList();
    },
    getAgentUnderList() {
      let _that = this;
      _that.$zx.terminal_api
        .getAgentUnderList(this.pageNo, this.pageSize, this.requstBody)
        .then((data) => {
          _that.terminalList = _that.terminalList.concat(data);
          console.log('_that.terminalList----->118', _that.terminalList);
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
    search(e) {
      console.log('e=' + e);
      this.requstBody.agentNo = e;
      this.pageNo = 1;
      this.terminalList = [];
      this.getAgentUnderList();
    },
  },
};
</script>

<style scoped lang="scss">
.terminal-state {
  &__header {
    padding: 20rpx;
    background-color: white;
  }

  &__item {
    background-color: white;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
  }
}

.yellow {
  color: #ff8e00;
}

.pop_filter {
  position: absolute;
  // top: 80rpx;

  &__title {
    font-weight: bold;
    height: 60rpx;
    line-height: 60rpx;
  }

  &__btn {
    background-color: #f6f6f6;
    width: 180rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__input {
    background-color: #f6f6f6;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__select {
    background-color: #f1e8ff;
    color: #9d60ff;
    background-image: url('../../../static/image/home/icon_filter_checked.png');
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}
</style>
